import React, { useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { RootState } from "../../store";
import {
  ProductCard,
  Stepper,
  Checkbox,
  SwipeCell,
  Button,
  SubmitBar,
  Dialog,
  NavBar,
  Tag,
} from "react-vant";
import { CarState } from "../../store/car";
import { useNavigate } from "react-router-dom";
const Index: React.FC = () => {
  const carList = useSelector((state: RootState) => state.car.carList);
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const delCar = (v: CarState) => {
    Dialog.confirm({
      title: "警告",
      message: "再减少就要删除了！",
    })
      .then(() => {
        dispatch({ type: "delCarList", payload: v });
      })
      .catch(() => {});
  };
  const [isEdit, setIsEdit] = useState(true);
  const totalState = carList.every((v) => v.state);
  const totalPrice = carList.filter(v => v.state).reduce((p, n) => {
    return p + n.price * n.count
  }, 0)
  return (
    <div>
      <NavBar
        onClickLeft={() => navigate(-1)}
        title="购物车"
        rightText={
          isEdit ? (
            <span onClick={() => setIsEdit(false)}>编辑</span>
          ) : (
            <span onClick={() => setIsEdit(true)}>完成</span>
          )
        }
      ></NavBar>
      <div>
        {carList.map((v) => {
          return (
            <SwipeCell
              key={v.id}
              rightAction={
                <Button
                  onClick={() => delCar(v)}
                  style={{ height: "100%" }}
                  square
                  type="danger"
                >
                  删除
                </Button>
              }
            >
              <div className="car-list-item">
                <Checkbox
                  checked={v.state}
                  onClick={() =>
                    dispatch({ type: "changeOneState", payload: v })
                  }
                ></Checkbox>
                <ProductCard
                  className="right"
                  key={v.id}
                  num={
                    <Stepper
                      min={1}
                      value={v.count}
                      onPlus={() =>
                        dispatch({
                          type: "addCarList",
                          payload: v,
                        })
                      }
                      onMinus={() =>
                        dispatch({
                          type: "subCarList",
                          payload: v,
                        })
                      }
                      onOverlimit={() => delCar(v)}
                    ></Stepper>
                  }
                  price={v.price.toFixed(2)}
                  desc={v.word}
                  title={v.title}
                  thumb={v.images[0]}
                ></ProductCard>
              </div>
            </SwipeCell>
          );
        })}
      </div>
      <SubmitBar
        style={{ bottom: "50px" }}
        price={totalPrice*100}
        buttonText="提交订单"
        onSubmit={() => navigate(`/order/${totalPrice}/购物车商品`)}
        tip={
          <>
            你的收货地址不支持同城送,
            <span style={{ color: "#1989fa" }}>修改地址</span>
          </>
        }
      >
        <Checkbox
          checked={totalState}
          onChange={(state) =>
            dispatch({ type: "changeTotalState", payload: state })
          }
        >
          全选
        </Checkbox>
        {isEdit === false && (
          <Button
            style={{ marginLeft: 6 }}
            type="danger"
            size="mini"
            onClick={() => {
              Dialog.confirm({
                title: "警告",
                message: "确定要删除所选数据吗？",
              })
                .then(() => {
                  dispatch({ type: "delCarListByState" });
                })
                .catch(() => {});
            }}
          >
            删除所选
          </Button>
        )}
      </SubmitBar>
    </div>
  );
};

export default Index;
